<template>
  <div>
    <!--ms-include-->
    <div class="pb-account">
      <p><i></i>资金明细</p>
      <div class="uc-r1" avalonctrl="vmFund">
        <div id="tab1" class="pb-tab">
          <ul class="pb-tab-title nav nav-tabs" style="background:none;">
            <li style="color:#000;" class="curr">资金明细</li>
          </ul>
          <ul class="pb-tab-con">
            <!--资金明细 -->
            <li class="pb-tab-con-item first" style="min-height: 450px; padding-bottom: 20px;" avalonctrl="vmFundJournal">
              <div class="query-condition">
                <span class="fr pt15 lh">
                  <input type="hidden" id="fundExplain" name="fundExplain" value="all">
                  <!-- <select class="sel-b" style="width: 100px;">
                    <option value="1W">最近一周</option>
                    <option value="1M">最近一月</option>
                    <option value="3M">最近三月</option>
                    <option value="6M">最近半年</option>
                    <option value="1Y">最近一年</option>
                  </select> -->
                </span>
                <!-- 切换显示，懒得加 -->
                <!-- <span @click="changeNav(index)" :class="{'curr':navIndex==index}" v-for="(item,index) in nav" :key="index" class="">
                  {{item}}
                </span> -->
              </div>
              <table class="table-list">
                <tbody>
                  <tr>
                    <th style="width: 180px;" class="pl10">股票代码</th>
                    <th>建仓费</th>
                    <th style="width: 110px;" class="txt-r">递延费</th>
                    <th style="width: 110px;padding-right:30px;text-align:right;" class="txt-r">信用金</th>
                  </tr>
                  <tr v-for="(item,index) in allMoney" :key="index" class="da">
                    <th style="width: 180px;" class="pl10">{{item.code}}</th>
                    <th>{{item.cangfei}}</th>
                    <th style="width: 110px;" class="txt-r">{{item.diyanfei}}</th>
                    <th style="width: 110px;padding-right:30px;text-align:right;" class="txt-r">{{item.xingyongjin}}</th>
                  </tr>
                </tbody>
              </table>
            </li>
          </ul>
          <div class="pagination clearfix " style="">
            <ul class="clearfix " style="margin-right: 0">
              <li>
                <a @click="fy(-1)" style="transform:scale(-1)" title="上一页" class="page prev iconfont">&gt;</a>
              </li>

              <li style="line-height: 10px; height: 30px; vertical-align: middle">记录总数：<i style="color: red">{{all}}</i> &nbsp;&nbsp;页码： <i style="color: red">{{now}}</i>&nbsp;/&nbsp;{{last}}
              </li>
              <li>
                <a @click="fy(1)" title="下一页" class="page next iconfont">&gt;</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--ms-include-end-->
  </div>
</template>

<script>
import Axios from "@/common/js/Axios";
export default {
  mounted() {
    this.getAll(this.now);
  },
  data() {
    return {
      //总信息
      all: 1,
      //当前页码
      now: 1,
      // 总共页码
      last: 1,
      token: localStorage.getItem("Authorization"),
      allMoney: [],
      //明细种类
      nav: ["全部", "保证金", "建仓费", "递延费"],
      navIndex: 0
    };
  },
  methods: {
    //翻页
    fy(v) {
      if (v == -1) {
        this.getAll(--this.now);
      } else {
        this.getAll(++this.now);
      }
    },
    //获取全部资金
    getAll(page) {
      if (page < 1) {
        this.now = 1;
        return false;
      }
      if (page > this.last) {
        this.now = this.last;
        return false;
      }
      Axios.getAxios(
        "/api/financialdetails",
        {
          page: page
        },
        {
          Authorization: "Bearer " + this.token
        }
      ).then(
        res => {
          this.allMoney.splice(0, this.allMoney.length);
          this.allMoney = this.allMoney.concat(res.data.data.data);
          this.all = res.data.data.total;
          this.now = res.data.data.current_page;
          this.last = res.data.data.last_page;

          console.log(res);
        },
        err => {
          this.$message("请登录后查看");
        }
      );
    },
    changeNav(i) {
      this.navIndex = i;
    }
  }
};
</script>


<style lang="stylus" scoped>
.da th {
  background: #fff !important;
}
/* 列表通用样式 */
.table-list th {
  height: 40px;
  background: #eee;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  color: #666;
  font-weight: bold;
}
.table-list td {
  height: 40px;
  border-bottom: 1px solid #DBDBDB;
}
.table-list .no-b td {
  border-bottom: none;
}
.table-list .uc-cash-detail {
  background: #F2F2F2;
  padding: 3px 10px;
}
.query-condition {
  padding: 16px 0;
}
.query-condition span {
  padding: 0 5px;
  cursor: pointer;
  margin-bottom: 10px;
}
.query-condition span.curr {
  background: #c5965a;
  border-radius: 3px;
  color: #FFF;
  cursor: default;
}
.table-list {
  border: 1px solid #e6e6e6;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}
th {
  text-align: left;
  font-weight: normal;
}
.pl10 {
  padding-left: 10px;
}

.pagination {
    padding: 10px 0;
        display: flex;
    justify-content: center;
    margin-top: -141px;
}
.pagination ul {
    float: right;
    margin-right: 140px;
}
.pagination li {
    display: inline-block;
    margin: 5px;
    line-height: 22px;
    height: 21px;
}
.pagination li span, .pagination li a.page {
    border-radius: 12px;
    display: inline-block;
    font-size: 12px;
    height: 21px;
    line-height: 22px;
    overflow: hidden;
    padding: 0 0 1px 1px;
    text-align: center;
    width: 21px;
}
.pagination li span {
    background: #E12D2D;
    border: 1px solid #E12D2D;
    color: #FFFFFF;
}
.pagination li a.page {
    border: 1px solid #808080;
    color: #808080;
}

.pagination li span.prev, .pagination li span.next, .pagination li a.page.prev, .pagination li a.page.next {
    font-size: 0px;
}

.pagination li span.prev, .pagination li span.next {
    background-color: #E5E4E2;
    border: 1px solid #E5E4E2;
}
.pagination li.disable span {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #808080;
}
.pagination li a{
  font-size:20px !important;
}
</style>
